<template>
	<div style="padding: 20px;">
		<u-toast ref="uToast" />
		<view class="rate">
			<p>菜肴口味</p>
			<u-rate v-model="commentparam.taste" :colors="colors" :size="60"></u-rate>
		</view>
		<view class="rate">
			<p>上菜速度</p>
			<u-rate v-model="commentparam.speed" :colors="colors" :size="60"></u-rate>
		</view>
		<view class="rate">
			<p>服务态度</p>
			<u-rate v-model="commentparam.treat" :colors="colors" :size="60"></u-rate>
		</view>
		<view>
			<view style="display: flex;justify-content: space-between;align-items: center;" v-for="(i,index) in dishlist">
				<view>
					<view>{{i.name}}</view>
					<view style="color: #aaacb6;font-size: 13px;">{{i.type}}</view>
				</view>
				<view style="margin-left: -280rpx;font-size: 13px;color: #989697;">
					X{{i.count}}
				</view>
				<view class="pic">
					<u-icon name="thumb-up" :style="i.isgood==true?'color:red;':''" @click="good(i,index)"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<textarea v-model="commentparam.comment" class="comment" placeholder="评论几句再走呗" placeholder-class="holder" />
			</view>
			<u-button type="error" @click="postcomment(dishlist)">提交</u-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				commentparam:{
					comment:'',
					taste:0,
					speed:0,
					treat:0,
					goodidlist:[],
					ordernumber:'',
					userinfo:{}
				},
				clickindex:null,
				dishlist: [],
				value: 0,
				value2: 0,
				value3: 0,
				colors: ['#ffc454', '#ffb409', '#ff9500'],
			}
		},
		onLoad(val) {
			this.id=val.id
			this.commentparam.userinfo = JSON.parse(uni.getStorageSync('currentUser'))
			this.commentparam.ordernumber=val.ordernumber
			this.dishlist = JSON.parse(val.dishlist)
			this.dishlist.forEach(i=>{
				i.isgood=false
			})
		},
		methods:{
			postcomment(dishlist){
				let goodlist=this.dishlist.filter(i=>i.isgood==true)
				let goodid=goodlist.map(i=>i._id)
				this.commentparam.goodidlist=goodid
				this.commentparam.dishlist=dishlist
				
					if(this.commentparam.taste==0||this.commentparam.speed==0||this.commentparam.treat==0||this.commentparam.comment==''){
						this.$refs.uToast.show({
											title: '您还有选项未填哦',
											type: 'warning',
											duration:1000
										})
										return
					}else{
						
										this.$u.post('/comment/addComment',this.commentparam).then(res=>{
											console.log(res,'sdsdsd');
											this.$refs.uToast.show({
																title: '评论成功',
																type: 'success',
																duration:200,
																back:true
															})
											})
											this.$u.post('/order/changeOrderStatus',{id:this.id,status:'4'}).then(res=>{
												console.log(res,'评价成功');
												
											})
					}
					
			},
			good(item,index){
				this.clickindex=index
				item.isgood=!item.isgood
				this.$set(this.dishlist,index,item)
				console.log(item);
				// this.$set(item,'isgood',item.isgood)
			}
		}
	}
</script>

<style lang="scss">
	.pic {
		width: 50rpx;
		height: 50rpx;
		overflow: hidden;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}
	.comment{
		width: 95%;height: 100px;margin: 20px auto;border: 2px solid #eee;box-shadow: 0px 0px 1px 0px; background: #f3f4f6;
	}
	.rate{
		margin-bottom: 20rpx;
	}
	.holder{
		color: #b1b9c1;
	}
</style>
